<template>
    <div>
        <div id="char_1" style="width: 350px; height: 250px;"></div>
    </div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { onMounted } from 'vue';
const props=defineProps({
    data:{
        type:Array,
        default:()=>{}
    }
})
onMounted(()=>{
    const curTop3 = props.data
    // 表5
    const charEle5 = document.getElementById('char_1') as HTMLElement;
    const charEch5: ECharts = init(charEle5);
    const option5: EChartsOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: curTop3
            }
        ]
    };
    charEch5.setOption(option5);
})
</script>

<style scoped>

</style>